<template>

	<view class="search p-2 bg-slate-100 min-h-[100vh]">

		<view class="flex items-center  border-0 border-b-[1px] pb-2  border-gray-100 border-solid">
			<view class="flex-auto">
				<up-search placeholder="输入产品名称" v-model="keyWord" class="bg-white rounded-full" @custom="onsearch"
					bgColor="white"></up-search>
			</view>
			<text @click="gotoBack()" class="px-2 text-red-500">返回</text>
		</view>

		<!-- 第一个商品 -->
		<view class="" v-if="goodsData.first.length">
			<!--  -->
			<text class="font-black  text-xl ">{{keyWord}}-产品</text>
			<good-list class="my-3" :data="goodsData.first"></good-list>
		</view>
		<!-- 第二个商品 -->
		<view class="" v-if="goodsData.two.length">
			<text class="font-black  text-xl  ">相关产品</text>
			<good-list class="my-3" :data="goodsData.two"></good-list>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	import {
		searchGoods
	} from '@/request/api.js';
	import {
		reactive,
		ref
	} from 'vue';

	//标题配置信息
	import {
		useDoctitleStore
	} from '@/stores/index'
	const doctitle = useDoctitleStore()

	onLoad((options) => {
		//搜索内容
		//获取参数
		keyWord.value = options.keyWord
		init(options)
	})

	onShow(() => {
		setTitle()
	})
	const setTitle = () => {
		// document.title = doctitle.title
		uni.setNavigationBarTitle({
			title:doctitle.title
		})
	}
	//搜索参数
	const keyWord = ref('')
	//产品的信息
	const goodsData = reactive({
		first: [],
		two: []
	})
	const init = (options) => {
		search(options)
	}
	const search = async (params) => {
		const res = await searchGoods(params)
		goodsData.first = res.first
		goodsData.two = res.two
	}

	//返回上一级
	const gotoBack = () => {
		// uni.navigateTo({
		// 	url:'/pages/index/index'
		// })
		uni.navigateBack()
		// uni.redirectTo({
		// 	url:'/pages/index/index'
		// })
	}


	//点击搜索
	const onsearch = async (value) => {
		await search({
			keyWord: value
		})
	}
</script>

<style lang="scss">
	:deep(.search) {
		.u-search {
			.u-search__action {
				@apply bg-[#e84546] h-full p-1 mr-1 rounded-full text-white #{!important};
			}
		}
	}
</style>